<template>
  <n-el>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 575.08 485.98"
    >
      <defs>
        <filter
          id="filter-1"
          x="-80.0%"
          y="-80.0%"
          width="260.0%"
          height="260.0%"
          filterUnits="objectBoundingBox"
        >
          <feGaussianBlur stdDeviation="12" in="SourceGraphic" />
        </filter>
      </defs>
      <g style="opacity: 0.9">
        <g>
          <image
            width="605"
            height="226"
            transform="translate(0 103.89)"
            xlink:href=""
          />
          <path
            d="M104,118H571V294H104a88,88,0,0,1,0-176Z"
            transform="translate(8.97 8.95)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--success-color)',
              fillRule: 'evenodd'
            }"
          />
        </g>
        <g>
          <image
            width="476"
            height="185"
            transform="translate(128.84 202)"
            xlink:href=""
          />
          <path
            d="M212.5,216H571V351H212.5a67.5,67.5,0,0,1,0-135Z"
            transform="translate(8.97 8.95)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--error-color)',
              fillRule: 'evenodd'
            }"
          />
        </g>
        <g>
          <image
            width="312"
            height="122"
            transform="translate(293.08 304.98)"
            xlink:href=""
          />
          <path
            d="M345,319H571v72H345a36,36,0,0,1,0-72Z"
            transform="translate(8.97 8.95)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--warning-color)',
              fillRule: 'evenodd'
            }"
          />
        </g>
        <g>
          <image
            width="264"
            height="122"
            transform="translate(340.94 363.98)"
            xlink:href=""
          />
          <path
            d="M393,378H571v72H393a36,36,0,0,1,0-72Z"
            transform="translate(8.97 8.95)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--info-color)',
              fillRule: 'evenodd'
            }"
          />
        </g>
        <g>
          <image
            width="390"
            height="185"
            transform="translate(214.81)"
            xlink:href=""
          />
          <path
            d="M298.5,14H571V149H298.5a67.5,67.5,0,0,1,0-135Z"
            transform="translate(8.97 8.95)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--warning-color)',
              fillRule: 'evenodd'
            }"
          />
        </g>
        <g>
          <image
            width="142"
            height="77"
            transform="translate(69.89 44.75)"
            xlink:href=""
          />
          <path
            d="M99.43,58.8h65a13.49,13.49,0,0,1,13.5,13.5h0a13.49,13.49,0,0,1-13.5,13.5h-65a13.5,13.5,0,0,1-13.5-13.5h0A13.5,13.5,0,0,1,99.43,58.8Z"
            transform="translate(8.97 8.95)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--error-color)',
              fillRule: 'evenodd'
            }"
          />
        </g>
        <g>
          <image
            width="142"
            height="73"
            transform="translate(188.95 374.52)"
            xlink:href=""
          />
          <path
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--success-color)',
              fillRule: 'evenodd'
            }"
            d="M216.5,388.57h69a11.5,11.5,0,0,1,11.5,11.5h0a11.5,11.5,0,0,1-11.5,11.5h-69a11.5,11.5,0,0,1-11.5-11.5h0A11.5,11.5,0,0,1,216.5,388.57Z"
            transform="translate(8.97 8.95)"
          />
        </g>
        <circle
          fill-opacity="0.3"
          fill="#000000"
          filter="url(#filter-1)"
          transform="translate(106.010000, 376.700000) scale(-1, 1) translate(-106.010000, -376.700000) "
          cx="106.01"
          cy="376.7"
          r="20"
        />
        <circle
          cx="106.01"
          cy="376.7"
          r="22.5"
          :style="{
            transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
            fill: 'var(--info-color)',
            fillRule: 'evenodd'
          }"
        />
      </g>
    </svg>
  </n-el>
</template>
